import React from 'react'
import { Carousel, WingBlank,Grid, Card, WhiteSpace,PullToRefresh  } from 'antd-mobile';
import { Icon } from 'antd'
import './index.css'
import icon1 from '../../assets/images/Find/1.png'
import icon2 from '../../assets/images/Find/2.png'
import icon3 from '../../assets/images/Find/3.png'
import icon4 from '../../assets/images/Find/4.png'
import icon5 from '../../assets/images/Find/5.png'
import axios from 'axios';
export default class Find extends React.Component{
  constructor(props){
    super(props);
    this.state={
      refreshing: false,
      down: true,
      banner: [],
      imgHeight: 176,
      catagroy:[{title:'每日推荐',path:'/find/recommend',icon:icon1},
                {title:'歌单',path:'/find/songlist',icon:icon2},
                {title:'排行榜',path:'/find/ranking',icon:icon3},
                {title:'电台',path:'/find/radio',icon:icon4},
                {title:'直播',path:'/find/live',icon:icon5}].map((item, i) => ({
                  path:item.path,
                icon: item.icon,
                text: item.title,
      })),
      tuijianList:[],
      newSong:Array.from(new Array(3)).map((_val, i) => ({
        icon: 'http://p4.music.126.net/-Ps0rCqH2cIt95orQmFYWQ==/109951164055032799.jpg?param=200y200',
        text: `来日可期 | 我愿意站在这里 等待与你的相遇`,
      })),
    }
  }
  componentDidMount() {
    //banner数据
    axios.post('http://localhost:8000/banner?type=2').then(({data})=>{
      if(data.code===200){
        this.setState({
          banner:data.banners
        })
      }
    })
    .catch(function (error) {
      console.log(error);
    });
    this.getData();

  }
  getData=()=>{
    //推荐歌单
    axios.post('http://localhost:8000/personalized/playlist?limit=6&offset=0').
    then(({data})=>{
      if(data.code===200){
        this.setState({
          tuijianList:data.result.map((val, i) => ({
            icon: val.picUrl,
            text: val.name,
          })),
        })
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  render() {
    return (
      <PullToRefresh
        damping={60}
        ref={el => this.ptr = el}
        style={{
          height: this.state.height,
          overflow: 'auto',
        }}
        indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
        direction={this.state.down ? 'down' : 'up'}
        refreshing={this.state.refreshing}
        onRefresh={() => {
          this.setState({ refreshing: true });
          this.getData();
          setTimeout(() => {

            this.setState({ refreshing: false });
          }, 1000);
        }}
      >
      <WingBlank>
        <Carousel className='Find-banner'
          autoplay={true}
          infinite
        >
          {this.state.banner.map(val => (
            <a
              key={val}
              href="#"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.pic}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
        <Grid className='Find-grids' data={this.state.catagroy}
          style={{padding:'10px 0'}}
          columnNum={5}
          hasLine={false}
          renderItem={dataItem => (
            <div>
              <a href={dataItem.path}><img src={dataItem.icon} style={{width:'60%', borderRadius:'50%' }} alt="" /></a>
              <div style={{ color: '#333', fontSize: '12px'}}>
                <span>{dataItem.text}</span>
              </div>
            </div>
          )}
        />
      </WingBlank>
      <div style={{borderTop:'1px solid #eee'}}></div>
      <WingBlank>
        <div className='tuijian'>
            <div className='title'>
              <h3>推荐歌单</h3>
              <span>歌单广场</span>
            </div>
            <Grid className='content' data={this.state.tuijianList}
              columnNum={3}
              hasLine={false}
              renderItem={dataItem => (
                <div>
                  <img src={dataItem.icon} style={{ width: '90%',borderRadius:'5px' }} alt="" />
                  <div style={{ color: '#888', fontSize: '11px',textAlign:"left"}}>
                    <span>{dataItem.text.length>20?dataItem.text.substring(0,20)+'...':dataItem.text}</span>
                  </div>
                </div>
              )}
            />
        </div>
        <div className='newSong'>
            <div className='title'>
              <h3>新碟<small style={{fontWeight:'normal'}}>|新歌</small></h3>
              <span>更多新碟</span>
            </div>
            <Grid className='content' data={this.state.newSong}
              columnNum={3}
              hasLine={false}
              renderItem={dataItem => (
                <div>
                  <img src={dataItem.icon} style={{ width: '90%',borderRadius:'5px' }} alt="" />
                  <div style={{ color: '#888', fontSize: '11px'}}>
                    <span>{dataItem.text.length>20?dataItem.text.substring(0,20)+'...':dataItem.text}</span>
                  </div>
                </div>
              )}
            />
        </div>
      </WingBlank>
      <WhiteSpace size="xs" style={{height:'6px',background:'#eee'}}/>
      <Card full>
        <Card.Header
          title="云村精选"
          extra={<small><Icon type="redo" />获取新内容</small>}
        />
        <Card.Body>
          <div>
            <p>解开新主唱Lydia的神秘面纱~</p>
            <img src='' alt=''/>
          </div>
        </Card.Body>
        <Card.Footer style={{padding:'15px 0'}} content={<div style={{width:130,display:'flex',justifyContent:'space-around'}}><span><Icon type="like" />sss</span><span><Icon type="message"/>sss</span></div>} extra={<Icon type="more" />} />
      </Card>
      </PullToRefresh>
    );
  }
}